<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿淘宝固定右侧侧边栏 </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            width: 800px;
            height: 100px;
            margin: 0 auto 10px;
            background-color: aqua;
        }
        .baner{
            width: 800px;
            height: 80px;
            margin: 0 auto 10px;
            background-color: antiquewhite;
        }
        .ban{
            width: 800px;   
            height: 2000px;
            margin: 0 auto 10px;
            background-color:blue;
        }
        .sidebar{
            position: absolute;
            top: 200px;
            right: 100px;
            width: 60px;
            height: 100px;
            background-color: yellow;
        }
        .gotop{
            display: none;
            font-size: 15px;
            margin-top: 80px;           
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="baner"></div>
    <div class="ban"></div>
    <div class="sidebar">
        <div class="gotop">回到顶部</div>
    </div>
    
    <script>       
        var sidebar=document.querySelector('.sidebar');
        var baner=document.querySelector('.baner');
        var gotop=document.querySelector('.gotop');
        var ban=document.querySelector('.ban');
        var banerTop=baner.offsetTop;
        var sidebarTop=sidebar.offsetTop-banerTop;
        var banTop=ban.offsetTop;
        //当页面滚动到baner区域时，侧边栏固定定位（不再跟随页面滚动）
        document.addEventListener('scroll',function(){
            // console.log()            
            // console.log(window.pageYOffset);//测试能否滚动
            //页面被卷去头部使用
            if(window.pageYOffset>=banerTop){
                sidebar.style.position='fixed';
                sidebar.style.top=sidebarTop+'px';
            }else{
                sidebar.style.position='absolute';
                // sidebar.style.top='300px';
            }
            if(window.pageYOffset>=banTop){
                gotop.style.display='block';
            }else{
                gotop.style.display='none';
            }
             
        })

        //点击返回顶部，缓慢滚动回顶部
        var gotop=document.querySelector('.gotop');
        gotop.onclick=function(){
            // window.scroll(x,y)让整个页面滚动,由x、y指定，且不需要单位
            // window.scroll(0,0);
            //调用动画
            animate(window,0);
        }

        function animate(el,target,callback){
            clearInterval(el.timer);
            el.timer=setInterval(function(){
                //当前滚动距离/10   步长
                var step=(target-window.pageYOffset)/10;
                step=step ? Math.ceil(step) : Math.floor(step);
                window.scroll(0,window.pageYOffset+step);

                if(window.pageYOffset==target){
                    clearInterval(el.timer);
                    callback && callback();
                }
            },15)
        }
    </script>
</body>
</html>